<template>
  <a-drawer v-model:visible="state.showDrawer" class="custom-class" style="" width="80%" placement="right" @close="drawerCancelFn">
    <div id="print-block">
      <HeaderTitle title="入库单信息" />
      <div>
        <h1 style="display: flex; width: 100%; justify-content: center; font-size: 24px; font-width: 700">入库单</h1>
        <a-row style="font-size: 15px; font-width: 700">
          <a-col style="padding: 5px" :span="4"> 入库单号:{{ state.data.batchNo }} </a-col>
          <a-col style="padding: 5px" :span="5"> 创建时间:{{ state.data.createTime }} </a-col>
          <a-col style="padding: 5px" :span="5"> 入库日期:{{ state.data.finishTime }}</a-col>
          <a-col style="padding: 5px" :span="5"> Selectedl存档完成 </a-col>
          <a-col style="padding: 5px" :span="4"> 入库数量:{{ state.data.data?.length }} </a-col>
        </a-row>
      </div>
      <HeaderTitle title="样本信息" />
      <vxe-table :export-config="{}" ref="tableRef" style="width: 100%; overflow-y: visible" border max-height="450" :data="state.data.data" align="center">
        <vxe-column field="specimen_type" title="样本类型" />
        <vxe-column field="serial" title="数字编号" />
        <vxe-column field="storageDesp" title="储存位置" />
        <vxe-column field="originalSerial" title="样本编号" />
        <vxe-column field="name" title="样本名称" />
        <vxe-column field="projectName" title="项目组" />
      </vxe-table>
    </div>
    <div style="display: flex; justify-content: center; background-color: #fff; margin: 20px 0">
      <Popconfirm title="是否确认导出？" @confirm="exportExcelFn">
        <Button type="primary">Excel导出</Button>
      </Popconfirm>
      <a-button style="margin-left: 20px" type="primary" @click="print">打印</a-button>
    </div>
    <template v-if="state.data?.status >= 9">
      <div style="display: flex">
        <div @click="openbillManage" style="width: 100px; height: 100px; border: 1px solid #ccc; display: flex; justify-content: center; align-items: center">
          <svg t="1683701718490" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2508" width="30" height="30">
            <path
              d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z"
              fill="#444444"
              p-id="2509"
            ></path>
          </svg>
        </div>
        <div>
          <p v-for="item in state.data.attachments" :key="item.id" @click="openbillManage">
            <span>{{ item.name }}</span>
            <svg style="cursor: pointer" t="1681117743816" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2701" width="23" height="23">
              <path
                d="M202.666667 256h-42.666667a32 32 0 0 1 0-64h704a32 32 0 0 1 0 64H266.666667v565.333333a53.333333 53.333333 0 0 0 53.333333 53.333334h384a53.333333 53.333333 0 0 0 53.333333-53.333334V352a32 32 0 0 1 64 0v469.333333c0 64.8-52.533333 117.333333-117.333333 117.333334H320c-64.8 0-117.333333-52.533333-117.333333-117.333334V256z m224-106.666667a32 32 0 0 1 0-64h170.666666a32 32 0 0 1 0 64H426.666667z m-32 288a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z m170.666666 0a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z"
                fill="#1296db"
                p-id="2702"
              ></path>
            </svg>
          </p>
        </div>
      </div>
      <a-row type="flex" justify="start" align="middle" class="info-margin info-title">
        <a-col style="width: 60%; justify-content: flex-start">
          <div class="col-33-r">
            <div style="margin-top: 10px; width: 100%">
              <h4>底单历史修改记录:</h4>
              <table style="width: 100%">
                <tr>
                  <th style="padding: 0px 10px">修改日期</th>
                  <th>修改人</th>
                  <th>修改说明</th>
                </tr>
                <tr v-for="(item, index) in state.data.histories" :key="index">
                  <td style="padding: 0px 10px">{{ item.modifyTime }}</td>
                  <td>{{ item.modifierId }}</td>
                  <td>{{ item.modifyReason }}</td>
                </tr>
              </table>
            </div>
          </div>
        </a-col>
      </a-row>
    </template>
  </a-drawer>
  <Modal :destroyOnClose="true" :maskClosable="false" :footer="null" title="底单存档" width="60%" v-model:visible="state.showHighCamera">
    <HighCameracopy
      @uploadSuccess="uploadSuccess"
      :attachments="state.data.attachments"
      highCameraId="inputManageHighCamera"
      canvasCameraId="inputManageCanvasCamera"
      :billId="String(state.data.id)"
      :billType="1"
    >
    </HighCameracopy>
  </Modal>
</template>

<script setup lang="ts">
import { Button, Modal, Popconfirm } from 'ant-design-vue';
import HeaderTitle from '@/components/headerTitle.vue';
import { reactive, ref, watch } from 'vue';
import { inputGetById } from '@/modules/input_sample/api/input_manage';
import { addSpecimenType } from '@/libs/utils';
import Print from 'print-js';
import HighCameracopy from '@/components/photograph/HighCameracopy.vue';

const props = withDefaults(
  defineProps<{
    id;
    showDrawer: boolean;
  }>(),
  {
    showDrawer: false,
  },
);
const emits = defineEmits<{
  (e: 'update:showDrawer', state: boolean): void;
}>();
const state: {
  data: any;
  showHighCamera: boolean;
  showDrawer: boolean;
} = reactive({
  data: {},
  showHighCamera: false,
  showDrawer: false,
});
const tableRef = ref();
// 获取数据源
const getData = async () => {
  if (!props.showDrawer) return;
  const { result } = await inputGetById(props.id);
  console.log(result);
  state.data = result;
  state.data.id = props.id;
  let arr: any[] = [];
  result.stocks.forEach((item) => {
    addSpecimenType(item.subSpecimens);
    item.subSpecimens.forEach((el) => {
      arr.push({ ...el, storageDesp: item.storageDesp });
    });
  });
  state.data.data = arr;
  state.showDrawer = true;
};
// 页面关闭事件
const drawerCancelFn = () => {
  emits('update:showDrawer', false);
  state.data = {};
};
/**
 * 高拍仪
 */
const openbillManage = () => {
  state.showHighCamera = true;
};
// 修改底单存档后的回调
const uploadSuccess = async () => {
  state.showHighCamera = false;
  const { result } = await inputGetById(state.data.id);
  let arr: any[] = [];
  state.data.attachments = result.attachments;
  state.data.histories = result.histories;
  result.stocks.forEach((item) => {
    item.subSpecimens.forEach((el) => {
      arr.push({ ...el, storageDesp: item.storageDesp });
    });
  });
  addSpecimenType(arr);
  state.data.data = arr;
};
/**
 * 打印
 */
// 打印
const exportExcelFn = () => {
  tableRef.value?.openExport();
};
const print = () => {
  Print({
    printable: 'print-block',
    type: 'html',
    documentTitle: '入库单',
    header: '入库单',
    headerStyle: 'font-weight:400;text-align:center;margin:50px 0',
    maxWidth: 1500,
    targetStyles: ['*'], // 允许打印所有样式属性
  });
};
watch(() => props.showDrawer, getData);
</script>

<style scoped lang="less">
p {
  margin-bottom: 3px;
  color: #1296db;
  font-size: 16px;
  display: flex;
  align-content: center;
  // line-height: ;
  margin-left: 5px;

  span {
    cursor: pointer;
    margin-right: 10px;
  }
}

.col-33 {
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.col-33-r {
  width: 68%;
  text-align: left;
  display: flex;
  align-items: center;
}

.tx_img {
  width: 600px;
}

.info-margin {
  margin-bottom: 18px;
}

.info-title {
  font-size: 14px;
}

.confirm-block {
  text-align: right;
}

.info-img {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed;
}

.table-style {
  padding-left: 75px;
}

.show/deep/.ivu-drawer-right {
  margin-top: 4%;
  height: 90%;
}

th {
  padding: 10px 20px;
}

td {
  padding: 0 20px;
}

.left {
  margin-left: 5.5%;
}
</style>
